import { Dropdown, Radio, Space } from 'antd-mobile'
import React, {useState} from 'react'
import eventProxy from '../utils'


const HeaderSearch = () => {

    const trademark = ["宝马", "奥迪", "奔驰", "布加迪威龙", "兰博基尼"]

    const downPrice = ['0','15%', "20%", "30%", "40%", "50%"]

    const [activeKey, setActiveKey] = useState(null)

    const getTrademark = (item) => {
        setActiveKey(null)
        eventProxy.emit('getTrademark', item)

    }

    const getDownPrice = (item) => {
        setActiveKey(null)
        eventProxy.emit('getDownPrice', item)


    }

    return <div className="header-box">
        <Dropdown activeKey={activeKey} onChange={(e) => setActiveKey(e)}>
            <Dropdown.Item key='sorter' title='品牌'>
                <div style={{ padding: 12 }}>
                    {
                        trademark.map((item, idx) => {
                            return <p className="drop-item" onClick={() => getTrademark(item)} key={idx}>{item}</p>
                        })
                    }
                    
                </div>
            </Dropdown.Item>
            <Dropdown.Item key='bizop' title='商机筛选'>
                <div style={{ padding: 12 }}>
                    {
                       downPrice.map((item, idx) => {
                           return <p className="drop-item" onClick={() => getDownPrice(item)} key={idx}>{item}</p>
                       }) 
                    }
                </div>
            </Dropdown.Item>
        </Dropdown>
    </div>
}

export default HeaderSearch